<template>
  <!--new-version-->
  <div>
    <!-- 在页面顶部展示所有答案 -->
    <div>
      <h3>当前所有题目答案：</h3>
      <ul>
        <li v-for="answer in answers11" :key="answer.questionId">
          题目 {{ answer.questionId }}: {{ answer }}
        </li>
      </ul>
    </div>

    <!-- 渲染每个问题 -->
    <div v-for="question in questions11" :key="question.questionId">
      <span v-if="question.visible">
        <span style="color: grey">
          <span v-if="question.questionId==='2'">多选互斥关系:1-[4];2-[4];但1和2可共存<br>多选跳题选a跳5 </span>
          <span v-if="question.questionId==='3'">多选跳题逻辑:3选a->5</span>
          <span v-if="question.questionId==='1'">单选跳题逻辑:1选a->3</span>
        </span>
        <!--动态渲染组件-->
        <component :is="getComponentType(question.type)" :questionId="question['questionId']"/>
        <a-divider></a-divider>
      </span>

    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import { MultiChoice, SingleChoice, SingleLineText,MultiLineText,DropdownSelect,CascadingDropdown,DescriptionQuestion } from '@/components/CVC/Component_Questions';// 引入题目组件
import {useQuestions} from "@/utils/paper.js";
// 问卷数据维护的封装调用
const { answers11,questions11} = useQuestions()
// 问卷的全局数据存储

const questions = ref([
  {
    questionId: "1",
    text: "01-单选",
    type: "RadioButton",
    options: [
      { value: "0", text: "服务优" },
      { value: "1", text: "服务良" }
    ],
    ruleLogic: {
      jumpLogic: [
        {
          matchValue: "0",
          targetQuestionId: "7",
          isUsing:false,//是否正在启用，默认为false
        }
      ]
    },
    visible: true, // 新增可见性属性
    visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
  },
  {
    questionId: "2",
    text: "02-多选：",
    type: "CheckBox",
    options: [
      { value: "1", text: "选项1" },
      { value: "2", text: "选项2" },
      { value: "3", text: "选项3" },
      { value: "4", text: "选项4" }
    ],
    ruleLogic: {
      // 这里注意排他是双向的，1排他4，那么4就要排他1
      exclusive: [
        { value: "1", exclusive: ["4"] },
        { value: "2", exclusive: ["4"] },
        { value: "4", exclusive: ["1", "2"] }
      ],
      jumpLogic: []
    },
    visible: true,
    visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
  },
  {
    questionId: "3",
    text: "03-多选：",
    type: "CheckBox",
    options: [
      { value: "1", text: "选项1" },
      { value: "2", text: "选项2" },
      { value: "3", text: "选项3" },
      { value: "4", text: "选项4" }
    ],
    ruleLogic: {
      // 这里注意排他是双向的，1排他4，那么4就要排他1
      exclusive: [
        { value: "1", exclusive: ["4"] },
        { value: "2", exclusive: ["4"] },
        { value: "4", exclusive: ["1", "2"] }
      ],
      jumpLogic: [
        {
          matchValue: "1",
          targetQuestionId: "5",
          isUsing:false,//是否正在启用，默认为false
        }
      ]
    },
    visible: true,
    visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
  },
  {
    questionId: "4",
    text: "04-多选：",
    type: "CheckBox",
    options: [
      { value: "1", text: "选项1" },
      { value: "2", text: "选项2" },
      { value: "3", text: "选项3" },
      { value: "4", text: "选项4" }
    ],
    ruleLogic: {
      // 这里注意排他是双向的，1排他4，那么4就要排他1
      exclusive: [
        { value: "1", exclusive: ["4"] },
        { value: "2", exclusive: ["4"] },
        { value: "4", exclusive: ["1", "2"] }
      ],
      jumpLogic: []
    },
    visible: true,
    visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
  },
  {
    questionId: "5",
    text: "05-单选",
    type: "RadioButton",
    options: [
      { value: "0", text: "服务优" },
      { value: "1", text: "服务良" }
    ],
    ruleLogic: {
      jumpLogic: []
    },
    visible: true, // 新增可见性属性
    visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
  },
  {
    questionId: "6",
    text: "06-单选",
    type: "RadioButton",
    options: [
      { value: "0", text: "服务优" },
      { value: "1", text: "服务良" }
    ],
    ruleLogic: {
      jumpLogic: []
    },
    visible: true, // 新增可见性属性
    visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
  },
  {
    questionId: "7",
    text: "07-单选",
    type: "RadioButton",
    options: [
      { value: "0", text: "服务优" },
      { value: "1", text: "服务良" }
    ],
    ruleLogic: {
      jumpLogic: [
        {
          matchValue: "1",
          targetQuestionId: "3",
          isUsing:false,//是否正在启用，默认为false
        }
      ]
    },
    visible: true, // 新增可见性属性
    visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
  },
  {
    questionId: "8",
    text: "08-单选",
    type: "RadioButton",
    options: [
      { value: "0", text: "服务优" },
      { value: "1", text: "服务良" }
    ],
    ruleLogic: {
      jumpLogic: []
    },
    visible: true, // 新增可见性属性
    visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
  },
  {
    questionId: "9",
    text: "09-单行文本",
    type: "SingleLineText",
    options: [
      { prefixText:"文本一" },
      { prefixText:"文本二" }
    ],
    ruleLogic: {
      jumpLogic: []
    },
    visible: true, // 新增可见性属性
    visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
  },
  {
    questionId: "10",
    text: "10-多行文本",
    type: "MultiLineText",
    options: [
      { prefixText:"文本一" },
      { prefixText:"文本二" }
    ],
    ruleLogic: {
      jumpLogic: []
    },
    visible: true, // 新增可见性属性
    visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
  },
  {
    questionId: "11",
    text: "11-下拉框",
    type: "DropdownSelect",
    options: [
      { value:"文本一",text:"文本一" },
      { value:"文本二",text:"文本二" },
      { value:"文本三",text:"文本三" }
    ],
    ruleLogic: {
      jumpLogic: []
    },
    visible: true, // 新增可见性属性
    visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
  },
  {
    questionId: "12",
    text: "12-多级下拉框",
    type: "CascadingDropdown",
    options: [
      {
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [
          {
            value: 'hangzhou',
            label: 'Hangzhou',
            children: [
              {
                value: 'xihu',
                label: 'West Lake',
              },
            ],
          },
        ],
      },
      {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [
          {
            value: 'nanjing',
            label: 'Nanjing',
            children: [
              {
                value: 'zhonghuamen',
                label: 'Zhong Hua Men',
              },
            ],
          },
        ],
      },
    ],
    levelLabels: ["省/直辖市", "市", "区/县"], // 这里定义每一层的名称
    ruleLogic: {
      jumpLogic: []
    },
    visible: true,
    visibleCount: 0
  },
  {
    questionId: "13",
    text:"13-说明题",
    type: "DescriptionQuestion", // 题目类型
    descriptions: {
      pre: "这是前置说明，在题目说明之前展示。",
      main: "这是题目的主说明部分。",
      post: "这是后置说明，在题目说明之后展示。"
    },
    visible: true, // 可见性
    visibleCount: 0
  },

]);
const answers = ref([
  {
    questionId: "1",
    type: "RadioButton",
    answer: ""
  },
  {
    questionId: "2",
    type: "CheckBox",
    answer: []
  },
  {
    questionId: "3",
    type: "CheckBox",
    answer: []
  },
  {
    questionId: "4",
    type: "CheckBox",
    answer: []
  },
  {
    questionId: "5",
    type: "RadioButton",
    answer: ""
  },
  {
    questionId: "6",
    type: "RadioButton",
    answer: ""
  },
  {
    questionId: "7",
    type: "RadioButton",
    answer: ""
  },
  {
    questionId: "8",
    type: "RadioButton",
    answer: ""
  },
  {
    questionId: "9",
    type: "SingleLineText",
    answer: ""
  },
  {
    questionId: "10",
    type: "MultiLineText",
    answer: ""
  },
  {
    questionId: "11",
    type: "DropdownSelect",
    answer: ""
  },
  {
    questionId: "12",
    type: "CascadingDropdown",
    answer: ["zhejiang", "hangzhou", "xihu"] // 答案数组，依次存储每一级选中的值
  },
]);


// 根据question.type确定渲染什么component
const getComponentType = (type) => {
  switch (type) {
    case "CheckBox":
      return MultiChoice; // 多选组件
    case "RadioButton":
      return SingleChoice; // 单选组件
    case "SingleLineText":
      return SingleLineText;
    case "MultiLineText":
      return MultiLineText;
    case "DropdownSelect":
      return DropdownSelect;
    case "CascadingDropdown":
      return CascadingDropdown;
    case "DescriptionQuestion":
      return DescriptionQuestion;
    default:
      return null;
  }
};
</script>
